<template>
  <div class="content">
    <div class="house-owner-box">
      <div class="headimg-box">
        <img v-lazy="imgPath" v-if="true" />
        <img src="~@/assets/img/headImg/defaultHead.jpg" v-else />
      </div>
      <div class="info">
        <p>{{rentOutUserRealName | realNameSubstr }}{{rentOutUserInfo.gender | genderState }}</p>
      </div>
    </div>
    <div class="collect-box" @click="toCollect" :class="{activeColor:isCollect}">
      <van-icon name="star" />
    </div>
    <div class="phone-box" id="phone-box">
      <div
        @click="toAppointment"
        :class="{disabledtoappointment1:isAlreadyAppointment,disabledtoappointment2:isCanToAppointment,disabledtoappointment3:isRent,}"
      >点击预约</div>
      <div @click="showPopup">致电房主</div>
    </div>
    <van-popup v-model="showPhone">
      <div class="popup-phone-box">
        <van-icon name="phone" color="green" />
        {{rentOutUserInfo.telPhone}}
      </div>
    </van-popup>
  </div>
</template>

<script>
import SelectPopup from "components/common/selectpopup/SelectPopup";
import { appointmentHouse, isAppointmentHouse } from "network/appointmentHouse";
import { getHouseDetail } from "network/housedetail";

import {
  isCollection,
  toCollection,
  cancelCollection,
} from "network/housedetail";

import { mapState } from "vuex";

export default {
  name: "",
  components: {
    SelectPopup,
  },
  props: {
    rentOutUserInfo: {
      type: Object,
      default: () => {},
    },
    rentOutUserRealName: {
      type: String,
      default: () => "",
    },
    imgPath: {
      type: String,
      default: () => "",
    },
    id: {
      //发布房源人的id
      type: String,
      default: () => "",
    },
    isCanToAppointment: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {
      isCollect: false,
      showPhone: false,
      showAppointment: false,
      houseId: "",
      isAlreadyAppointment: false, //我是否已经预约过了
      staticpath: localStorage.getItem("staticpath"),
      isRent:false
    };
  },
  created() {
    console.log(this.isCanToAppointment);
    this.houseId = this.$route.query.houseId;
    let houseId = this.houseId;
    let userId = this.userId;
    console.log(this.id);
    console.log(this.userId);
    console.log(houseId);
    isCollection({ userId, houseId }).then((res) => {
      this.isCollect = res.data;
    });
    isAppointmentHouse({ houseId, userId }).then((res) => {
      this.isAlreadyAppointment = res.data;
    });
    getHouseDetail(houseId).then((res) => {
      console.log(res.data.isRent);
      if(res.data.isRent == 1){
        this.isRent = true
      }else {
        this.isRent = false
      }
    });
  },
  methods: {
    //点击收藏
    toCollect() {
      let houseId = this.houseId;
      let userId = this.userId;
      if(!this.userId){
        this.$router.push('/login')
        return
      }
      if (userId == this.id) {
        this.$toast({
          message: "自己发布的房源",
          position: "bottom",
        });
        return false;
      }
      if (this.isCollect) {
        cancelCollection({ houseId, userId }).then((res) => {
          console.log(res);
          this.isCollect = !this.isCollect;
        });
      } else {
        toCollection({ houseId, userId }).then((res) => {
          console.log(res);
          this.isCollect = !this.isCollect;
        });
      }
    },
    showPopup() {
      this.showPhone = true;
    },
    handleCancel() {
      this.showAppointment = false;
    },
    //点击预约
    toAppointment() {
      if(!this.userId){
        this.$router.push('/login')
        return
      }
      if(this.isRent){
        this.$toast({
          message:"房屋已出租",
          position:"bottom"
        })
        return false
      }
      if(this.isAlreadyAppointment){
        this.$toast({
          message:"已经预约过了",
          position:"bottom"
        })
        return false
      }
      if (this.id == this.userId) {
        this.$toast({
          message: "自己发布的房源",
          position: "bottom",
        });
        return false;
      }
      let houseId = this.$route.query.houseId;
      this.$router.push({
        path: "/toappointmenthouse",
        query: {
          houseId,
        },
      });
    },
    handleClickOverlay() {
      this.showAppointment = !this.showAppointment;
    },
  },
  filters: {
    genderState(val) {
      return val == 2 ? "女士" : "先生";
    },
    realNameSubstr(val) {
      return val.substr(0, 1);
    },
  },
  computed: {
    ...mapState({
      userId: (state) => state.moduleUser.userId,
    }),
  },
};
</script>

<style scoped>
.content {
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.2);
  background-color: #fff;
}
.house-owner-box {
  display: flex;
  align-items: center;
  width: 90px;
  height: 100%;
  background-color: #fff;
}
.headimg-box {
  height: 35px;
  width: 35px;
  border-radius: 35px;
  margin-left: 5px;
  margin-right: 8px;
  overflow: hidden;
}
.headimg-box img {
  /* height: 100%;
  width: 100%; */
  height: 35px;
  width: 35px;
}
.info {
  font-size: 12px;
  color: #585858;
  line-height: 50px;
}
.collect-box {
  width: 40px;
  height: 50px;
  padding-right: 10px;
  line-height: 50px;
  text-align: center;
  font-size: 23px;
  background-color: #fff;
}
.phone-box {
  display: flex;
  flex: 1;
  justify-content: center;
  background-color: #fff;
}

.phone-box > div {
  flex: 1;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
}
.phone-box > div:nth-child(1) {
  background-color: #ff8132;
  border-radius: 20px 0 0 20px;
}
.phone-box > div:nth-child(2) {
  background-color: red;
  border-radius: 0 20px 20px 0;
}
.activeColor {
  color: #ff5654;
}
.popup-phone-box {
  height: 100px;
  width: 200px;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
}
.van-popup {
  border-radius: 10px;
}
.popup-appointment-box {
  display: flex;
  flex-direction: column;
  height: 100px;
  width: 200px;
}
.popup-appointment-box p {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}
.select-box {
  display: flex;
  height: 50px;
  align-items: center;
  box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.2);
}
.select-box div {
  width: 100px;
  text-align: center;
  height: 50px;
  line-height: 50px;
}
.select-box div {
  font-size: 16px;
  border-right: 1px solid rgba(100, 100, 100, 0.2);
}
#phone-box > .disabledtoappointment1 {
  background-color: #ccc;
}
#phone-box > .disabledtoappointment2 {
  background-color: #ccc;
}
#phone-box > .disabledtoappointment3 {
  background-color: #ccc;
}
</style>